import React, { Component } from 'react';

// // 1.如果一个数组的元素时jsx代码 - 记住给数组元素添加 key 属性 
// // Each child in a list should have a unique "key" prop.
// class App extends Component {
//   render() {
//     const arr = [
//       <div key={ 1 }>item1</div>,
//       <div key={ 2 }>item2</div>,
//       <div key={ 3 }>item3</div>,
//       <div key={ 4 }>item4</div>
//     ]
//     return (
//       <div>
//         { arr }
//       </div>
//     );
//   }
// }

// 2.先遍历后渲染
// class App extends Component {
//   state = {
//     arr: ['a', 'b', 'c', 'd']
//   }
//   render () {
//     const list = []
//     // this.state.arr.forEach((item, index) => {
//     //   list.push(<li key = { index }>{ item }</li>)
//     // })
//     // for(var i = 0; i < this.state.arr.length; i++) {
//     //   list.push(<li key = { i }>{  this.state.arr[i] }</li>)
//     // }
//     // for(var i in this.state.arr) {
//     //   list.push(<li key = { i }>{  this.state.arr[i] }</li>)
//     // }
//     for (var item of this.state.arr) {
//       list.push(<li key = { item }>{  item }</li>)
//     }
//     return (
//       <ul>
//         { list }
//       </ul>
//     )
//   }
// }

// 3.边遍历边渲染
// class App extends Component {
//   state = {
//     arr: ['aa', 'bb', 'cc' ,'dd']
//   }

//   render () {
//     return (
//       <ul>
//         {
//           this.state.arr.map((item, index) => {
//             return (<li key = { index }>{ item }</li>)
//           })
//         }
//       </ul>
//     )
//   }
// }

// class App extends Component {
//   state = {
//     cityList: []
//   }
//   componentDidMount () {
//     fetch('/city/sortCity.json').then(res => res.json()).then(res => {
//       console.log(res)
//       this.setState({ cityList: res })
//     })
//   }
//   render () {
//     const { cityList } = this.state
//     return (
//       <div>
//         <h1>城市列表</h1>
//         <ul>
//           {
//             cityList && cityList.map((item) => {
//               return (<li key = { item.letter }>
//                 {
//                   item.letter
//                 }
//                 <ol>
//                   {
//                     item.data && item.data.map(itm => {
//                       return (<li key = { itm.cityId }>{ itm.name }</li>)
//                     })
//                   }
//                 </ol>
//               </li>)
//             })
//           }
//         </ul>
//       </div>
//     )
//   }
// }

class App extends Component {
  state = {
    cityList: []
  }
  componentDidMount () {
    fetch('/city/sortCity.json').then(res => res.json()).then(res => {
      this.setState({
        cityList: res
      })
    })
  }
  render () {
    const { cityList } = this.state
    const arr = []
    cityList.forEach(item => {
      const list = []
      item.data.forEach((itm) => {
        list.push(<p key = { itm.cityId }>{itm.name}</p>)
      })
      arr.push(<li key = { item.letter }>
        { item.letter }
        { list }
      </li>)
    })
    return (
      <div>{ arr }</div>
    )
  }
}

export default App;